<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>03.JSX</title>
  </head>
  <body>
    <!-- 2. 准备一个根容器：将来React内容都会渲染到容器内部 -->
    <div id="root"></div>
    <!-- 1. 引入 react 相关的库：注意引用顺序 -->
    <!-- 引入 react 库，暴露 React 函数对象 -->
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      // 1. 基本使用
      //   const element = (
      //     <h1 id="title" className="happy">
      //       你好 笨蛋康康
      //     </h1>
      //   );

      // 2. 复杂使用
      //   const element = (
      //     <ul>
      //       <li>
      //         <a href="https://www.atguigu.com">尚硅谷</a>
      //       </li>
      //     </ul>
      //   );

      //   3. 渲染 js 数据
      // JSX 语法中使用 {} 来渲染 js 数据

      //   const link = "https://www.atguigu.com";
      //   const linktext = "尚硅谷!!!";

      //   const element = (
      //     <ul>
      //       <li>
      //         <a href={link}>{linktext}</a>
      //       </li>
      //     </ul>
      //   );

      // 4. JSX语法注意事项:
      // 1. 必须有一个根标签（创建的React元素，必须被一个标签包裹）
      // 2. 标签必须有结束符

      const element = (
        <div>
          <button>按钮1</button>
          <button>按钮2</button>
          <button>按钮3</button>
          <input type="text"/>
        </div>
      );

      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
